<template>
    <div>
      <div class="lobby_header" >
        <div class="back" @click="back">
          <div class="back_wrap">
            <img class="icon" :src="require('../../assets/images/icon/back.png')">
          </div>
        </div>
        <div class="title_wrap">
          <div class="title">一分快3</div>
          <img class="triangle" src="">
        </div>
        <div class="right_routes">
          <div class="item"><img class="icon" :src="require('../../assets/images/icon/touzhujilu.png')">投注记录</div>
          <div class="item"><img class="icon" :src="require('../../assets/images/icon/zishi.png')">走势</div>
          <div class="item"><img class="icon" :src="require('../../assets/images/icon/guize.png')">规则</div>
        </div>
      </div>

      <div class="draw" :style="showLastLott?'height: 240px':'height: 130px'">
        <div class="big">
          <div class="content">
            <div class="title">
              <div class="time animated fadeIn">距20190808期开奖：<van-count-down class="timeleft" :time= "60* 1000" /></div>
              <div class="btn" @click="showLastLottery">近期开奖<div :class="showLastLott? 'logo_act' : 'logo'"></div></div>
            </div>
            <div v-if="!showLastLott" class="middle">
              <img v-for="(item, index) in lastLotts" :src="k3Num[item - 1]" :key="index" class="dice_img">
            </div>
            <div v-if="showLastLott" class="list" >
              <div class="item" v-for="(item, index) in lastLottList" :key="index">
                <div class="left"><span>{{item.nper}}</span><span>{{item.time}}</span></div>
                <div class="center" style="height: 26px;"></div>
                <div class="right">
                  <img v-for="(i, idx) in item.lastLotts" :src="k3Num[i - 1]" :key="idx" class="dice_img">
                </div>
                <div class="right_extra">
                  <div class="extra_item a">1 3 4</div>
                  <div class="extra_item b">8</div>
                  <div class="extra_item c">小</div>
                  <div class="extra_item d">双</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="play_type">
          <div :class="normalModel? 'play_type_item_active': 'play_type_item'" @click="modelChange">普通模式</div>
          <div :class="normalModel? 'play_type_item': 'play_type_item_active'" @click="modelChange">长龙遗漏模式</div>
        </div>
      </div>
    </div>
</template>

<script>
  import baseData from '../../config/BaseData.js'
    export default {
      name: "bet-detail-header",
      props: {
        lastLotts: {
          type: Array,
          default: []
        },
        lastLottList: {
          type: Array,
          default: []
        }
      },
      data(){
          return {
            showLastLott: false,
            k3Num: baseData.k3num,
            normalModel: true
          }
      },
      methods:{
        back () {
          this.$router.go(-1)
        },
        // 近期开奖
        showLastLottery() {
          this.showLastLott = !this.showLastLott;
        },
        // 模式选择
        modelChange(){
          this.normalModel = !this.normalModel;
          this.$parent.changeModel(this.normalModel);
        }
      }
    }
</script>

<style lang="less" scoped>
  .lobby_header{
    width: 100%;
    height: 40px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    background: -webkit-linear-gradient(0,#9067ff,#ff78d2);
    color: #fdfdfd;

    .back{


      .back_wrap{
        width: 100%;
        height: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 16px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;

        .icon{
          height: 20px;
          margin: 0;
          padding: 0;
        }
      }
    }

    .title_wrap{
      flex: 1 1;
      height: 100%;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
      font-size: 14px;
      white-space: nowrap;

      .title{
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;

      }
      .triangle{
        height: 6px;
        margin: auto;
        margin-left: 12px;
      }
    }

    .right_routes{
      display: flex;
      -ms-flex-align: center;
      align-items: center;
      flex: 1 1;
      height: 100%;
      -ms-flex-pack: end;
      justify-content: flex-end;
      padding-right: 12px;

      .item{
        font-size: 6px;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-left: 10px;
        min-width: 40px;
        white-space: nowrap;

        .icon{
          height: 12px;
          margin-right: 2px;
        }
      }
    }
  }

  .draw{
    width: 100%;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
    -ms-flex-direction: column;
    flex-direction: column;
    background: -webkit-linear-gradient(0,#9067ff,#ff78d2);
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    /*color: #fdfdfd;*/
  }
  .big{
    -webkit-animation-duration: 1s!important;
    animation-duration: 1s!important;
    width: 100%;
    font-size: 14px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 4px;

    .content{
      width: 90%;
      border-radius: 20px;
      overflow: hidden;
      background-color: #fdfdfd;

      .title{
        align-items: center;
        background-color: #f2f2f2;
        color: #661dac;
        height: 28px;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 14px;
        display: flex;
        -ms-flex-align: center;
        align-items: center;

        .time{
          justify-content: center;
          font-size: 12px;
          color: #3f3f3f;
          -webkit-animation-duration: .3s;
          animation-duration: .3s;
        }

        .animated{
          -webkit-animation-duration: 1s;
          animation-duration: 1s;
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
        }

        .fadeIn{
          -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
        }

        .timeleft{
          color: #ff6c2c;
          display: inline-block;
        }

        .btn{
          font-size: 12px;
          background-color: #f2f2f2;
          color: #ff6c2c;
          height: 30px;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-pack: center;
          justify-content: center;
          -ms-flex-align: center;
          align-items: center;

          .logo{
            -webkit-transition: all .4s;
            -o-transition: all .4s;
            transition: all .4s;
            margin-left: .3rem;
            width: 0;
            height: 0;
            border-left: .25rem solid transparent;
            border-right: .25rem solid transparent;
            border-bottom: .25rem solid #ff6c2c;
          }

          .logo_act{
            transform: rotate(180deg);

            -webkit-transition: all .4s;
            -o-transition: all .4s;
            transition: all .4s;
            margin-left: .3rem;
            width: 0;
            height: 0;
            border-left: .25rem solid transparent;
            border-right: .25rem solid transparent;
            border-bottom: .25rem solid #ff6c2c;
          }
        }
      }

      .middle{
        display: flex;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 8px;

        .dice_img{
          width: 32px;
          margin: 0 8px;
        }
      }

      .list{
        color: #f70;
        height: 140px;
        overflow-x: hidden;
        overflow-y: scroll;
        padding: 0 8px;

        .item{
          display: flex;
          -ms-flex-align: center;
          align-items: center;
          font-size: 12px;
          overflow: hidden;

          .left{
            box-sizing: border-box;
            color: #3f3f3f;
            -ms-flex-pack: center;
            justify-content: center;
          }

          .center{
            margin: 0 8px;
            width: 1px;
            background-color: #d8d8d8;
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: center;
            justify-content: center;
            -ms-flex-align: center;
            align-items: center;

            &:before{
              position: absolute;
              content: "";
              width: 5px;
              height: 5px;
              background-color: #d8d8d8;
              border-radius: 100%;
              top: 0;
              bottom: 0;
              left: -2px;
              margin: auto;
            }
          }

          .right{
            position: relative;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            color: #fdfdfd;

            .dice_img{
              width: 20px;
              margin: 0 1.2px;
            }
          }

          .right_extra{
            margin: 0 4px;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            color: #000;

            .a{
              width: 40px;
              white-space: nowrap;
              font-size: 100%;
            }
            .b{
              width: 10px;
              text-align: center;
            }
            .c, .d{
              width: 16px;
              text-align: center;
            }
          }
        }
      }
    }
  }

  .draw .play_type{
    width: 90%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    font-size: 12px;

    .play_type_item_active{

      padding: 8px 0;
      white-space: nowrap;
      -ms-flex: 1 1;
      flex: 1 1;
      background-color: #fff;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #661dac;
      color: #fff;
      background-color: #661dac;
    }

    .play_type_item{
      padding: 8px 0;
      white-space: nowrap;
      -ms-flex: 1 1;
      flex: 1 1;
      background-color: #fff;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #661dac;
    }
  }

</style>
